var lists = [
    {
        img: 'vans.jpg',
        title: 'Vans范斯 经典系列 Old Skool板鞋运动鞋 低帮经典款男女官方正品',
        id: 2001,
        size: '37',
        oriPrice: 399.99,
        nowPrice: 299.98,
    },
    {
        img: 'bag.png',
        title: 'Gucci Dressage Original GG Ganvas Tote Bag 296850 Coffe',
        id: 24234,
        size: 'Defalt',
        oriPrice: 180.96,
        nowPrice: 120.69,
    },
    {
        img: 'converse.jpg',
        title: 'CONVERSE匡威官方 Batman 80th 蝙蝠侠80周年联名 高帮 167303C',
        id: 32001,
        size: '37',
        oriPrice: 259.98,
        nowPrice: 209.48,
    },
    {
        img: 'bsdon.jpg',
        title: '波司登冬季新款大毛领羽绒服女中长款厚款防寒冬天外套B80141038',
        id: 5884,
        size: '160/84A',
        oriPrice: 1399.99,
        nowPrice: 1099.30,
    },
    {
        img: 'olay.jpg',
        title: 'Olay玉兰油大红瓶新生塑颜金纯面霜50g 补水保湿修护紧致护肤霜女',
        id: 6854,
        size: '50g/ml',
        oriPrice: 268.00,
        nowPrice: 200.00,
    }
];
window.onload = function () {
      // getElt封装获取元素
    var shopS = getEle(".shopS")[0];
    var countall = getEle(".countall")[0];
    var cartall = 0;
    var savetall = 0;
    var list = `<tr class="nav">
                    <th class="Son1">Your Item(s)</th>
                    <th class="Son2">Quantity</th>
                    <th class="Son3">Price</th>
                    <th class="Son4">Total Price</th>
                    <th class="Son5">Remove</th>
                </tr>`
    for (let i = 0; i < lists.length; i++) {
        cartall += lists[i].nowPrice;
        savetall += lists[i].oriPrice - lists[i].nowPrice;
        list += `<tr class="shopList">
                    <td class="imgTd"><img class="shops" src="../images/${lists[i].img}" alt="" srcset=""></td>
                    <td class="titleTd">
                        <h6>${lists[i].title}</h6>
                        <span>ID:#${lists[i].id}</span>
                        <span>Size:${lists[i].size}</span>
                    </td>
                    <td class="Son2">
                        <span class="reduce">-</span>
                        <input type="text" value="1" class="count">
                        <span class="add">+</span>
                    </td>
                    <td class="Son3">
                        <del class="oriPrice">${lists[i].oriPrice} py6</del>
                        <b class="nowPrice">${lists[i].nowPrice} py6</b>
                    </td>
                    <td class="Son4">
                        <span class="priceAll">${lists[i].oriPrice} py6</span>
                        <span class="saveAll">You save ${(lists[i].oriPrice - lists[i].nowPrice).toFixed(2)} py6</span>
                    </td>
                    <td class="Son5">
                        <img class="del" src="../images/del.png" alt="">
                    </td>
                </tr>`
    }
    list += `<tr class="countall">
                <td><span><i class="iconL"></i> Continue Shopping</span></td>
                <td class="countRight">
                    <span class="cartall">Cart Total: <b>${cartall.toFixed(2)} py6.</b></span>
                    <span class="savetall">Your Total Saving:${savetall.toFixed(2)} py6.</span>
                    <button>PROCEED TO CHECKOUT <i class="iconR"></i></button>
                </td>
            </tr>`

    shopS.innerHTML = list;
    shopS.onclick = function (e) {
        var target = e.target;
        var nowTr = target.parentElement.parentElement;
        var tobody = target.parentElement.parentElement.parentElement;
        // getElementsByClassName返回文档中所有指定类名的元素集合
        var count = nowTr.getElementsByClassName("count")[0];
        var priceAll = nowTr.getElementsByClassName("priceAll")[0];
        var saveAll = nowTr.getElementsByClassName("saveAll")[0];
        var oriPrice = nowTr.getElementsByClassName("oriPrice")[0];
         // 原来的价格
        var nowPrice = nowTr.getElementsByClassName("nowPrice")[0];
        // 现在的价格
        var cartallspan = getEle(".cartall")[0];
        // getElt封装获取元素
        var savetallspan = getEle(".savetall")[0];
        // 使用 parseFloat() 来解析不同的字符串
        nowPrice = parseFloat(nowPrice.innerHTML);
        oriPrice = parseFloat(oriPrice.innerHTML);
        console.log(cartall, savetall);
        // switch 语句用于基于不同条件执行不同动作。
        // break; 防止穿透;
        switch (target.className) {
            case 'add':
                count.value++;
                priceAll.innerHTML = (count.value * nowPrice).toFixed(2) + ' py6';
                saveAll.innerHTML = 'You save ' + (count.value * (oriPrice - nowPrice)).toFixed(2) + ' py6';
                cartall += nowPrice;
                savetall += (oriPrice - nowPrice);
                cartallspan.innerHTML = `Cart Total: <b>${cartall.toFixed(2)} py6.</b>`;
                savetallspan.innerHTML = `Your Total Saving:${savetall.toFixed(2)} py6.`;
                break;
            case 'reduce':
                console.log(count.value)
                if (count.value == 0) {
                    break;
                }
                count.value--;
                priceAll.innerHTML = (count.value * nowPrice).toFixed(2) + ' py6';
                saveAll.innerHTML = 'You save ' + (count.value * (oriPrice - nowPrice)).toFixed(2) + ' py6';
                cartall -= nowPrice;
                savetall -= (oriPrice - nowPrice);
                cartallspan.innerHTML = `Cart Total: <b>${cartall.toFixed(2)} py6.</b>`;
                savetallspan.innerHTML = `Your Total Saving:${savetall.toFixed(2)} py6.`;
                break;
            case 'del':
                // 确认弹窗
                var flag = confirm("亲确认取消此订单吗？");
                if (flag) {
                    // 删除节点
                    tobody.removeChild(nowTr);
                    cartall -= nowPrice * count.value;
                    savetall -= (oriPrice - nowPrice) * nowPrice * count.value;
                    // toFixed 保留小数点2位
                    cartallspan.innerHTML = `Cart Total: <b>${cartall.toFixed(2)} py6.</b>`;
                    savetallspan.innerHTML = `Your Total Saving:${savetall.toFixed(2)} py6.`;
                }
                break;
        }
    }
}